html, body{
    position: relative;
    height: 100%;
    overflow: hidden;
}
.c-layout{
    height: 100%;
    background: #666;
    .c-layout-header{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .c-layout-main{
        height: 100%;
    }
    .c-layout-right{
        position: absolute;
        top: 40px;
        right: -334px;
        bottom: 223px;
        width: 334px;
        transition: all 0.3s ease-in-out 0s;
    }
    .c-layout-bottom{
        position: absolute;
        bottom: -216px;
        left: 0;
        width: 100%;
        transition: all 0.3s ease-in-out 0s;
    }

    .c-row{
        &:before,
        &:after{
            clear: both;
            display: table;
        }
        .c-col{
            float: left;
        }
    }
}
.show-right-panel{
    .c-layout-right{
        right: 0;
        bottom: 8px;
    }
}
.show-bottom-panel{
    .c-layout-bottom{
        bottom: 0;
    }
    .c-bottom{
        .c-bottom-ctrl{
            background: url("../img/bottom-ctrl.png") no-repeat center;
        }
    }
}
.show-right-panel.show-bottom-panel{
    .c-layout-right{
        bottom: 223px;
    }
}